<template>
    <el-card shadow='never' style='max-height: 70vh; overflow: auto'>
        <el-form ref='form' :model='form' :rules='rules' label-width='90px' :disabled='disabled'>
            <el-form-item label='id:' prop='id' v-show='false'>
                <el-input v-model='form.id' disabled />
            </el-form-item>
            <el-form-item label='租户:' prop='tenant_id' v-if='false'>
                <SelectPage v-model='form.tenant_id' :url="'/admin/ch.tenant/selectPage'"
                            :filter="{type:{value: 2,op:'='}}"
                            placeholder='请选择租户'
                            show_field='name' show_id='id' query_field='id' :multiple='false' />
            </el-form-item>
            <el-form-item label='医院:' prop='hiospital_id'>
                <SelectPage v-model='form.hiospital_id' placeholder='请选择所属医院'
                            :url="'/admin/ch.hospital/selectPage'" show_field='name' show_id='id' query_field='id'
                            :multiple='false' />
            </el-form-item>
            <el-form-item label='图标:' prop='image'>
                <ImageUpload v-model='form.image' />
            </el-form-item>
            <el-form-item label='科室名称:' prop='name'>
                <el-input v-model='form.name' placeholder='请输入科室名称' clearable />
            </el-form-item>
            <el-form-item label='简介:' prop='description'>
                <el-input v-model='form.description' placeholder='请输入简介' clearable type='textarea' rows='5' />
            </el-form-item>
            <el-form-item label='详细介绍:' prop='about'>
                <Editor v-model='form.about' />
            </el-form-item>
            <el-form-item label='状态'>
                <el-radio-group v-model='form.status'>
                    <el-radio v-for='dict in statusOptions' :key='dict.value' :label='dict.value'>{{ dict.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='医生类别:' prop='categorys'>
                <div class='flex'>
                    <SelectCategory url='/admin/ch.system_category/tree' style='flex: 1'
                                    :queryParams='{
                                            type: 2
                                        }'
                                    :check-strictly='true'
                                    :value='[cache.category1, cache.category2, cache.category3]'
                                    @change='onChangeCategory'></SelectCategory>
                    <el-button type='success' plain size='small' style='margin-left: 10px;' @click='handleAddCategory'>
                        添加
                    </el-button>
                </div>
                <el-tag :key='idx' closable @close='onCloseCategory(idx)'
                        v-for='(el, idx) in form.categorys'
                        :disable-transitions='false'>
                    {{ el.category3_text || el.category2_text || el.category1_text }}
                </el-tag>
            </el-form-item>
            <el-form-item label='排序:' prop='weigh'>
                <el-input-number v-model='form.weigh' :step='1' :min='0'></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='submitForm'>确认</el-button>
                <el-button type='warning' @click='cancel'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import SelectCategory from '@/components/My/SelectCategory'

export default {
    name: 'EditForm',
    components: { SelectCategory },
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                tenant_id: [{ required: true, message: '请选择租户', trigger: 'blur' }],
                hiospital_id: [{ required: true, message: '请选择医院', trigger: 'blur' }],
                image: [{ required: true, message: '请上传图标', trigger: 'blur' }],
                name: [{ required: true, message: '请输入科室名称', trigger: 'blur' }],
                about: [{ required: true, message: '请输入科室介绍', trigger: 'blur' }],
                categorys: [{ required: true, message: '请选择科室分类', trigger: 'blur' }],
            },
            form: {
                status: 1,
            },
            // 区域选择配置
            areaOptions: regionData,
            statusOptions: this.$init.statusRoleOptions,
            cache: {},
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                } else {
                    this.form = {}
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
            this.form = {}
        },
        onChangeCategory(e, pathLabels) {
            if (e.length >= 3) this.$set(this.cache, 'category3', e[2])
            if (e.length >= 3) this.$set(this.cache, 'category3_text', pathLabels[2])
            if (e.length >= 2) this.$set(this.cache, 'category2', e[1])
            if (e.length >= 2) this.$set(this.cache, 'category2_text', pathLabels[1])
            if (e.length >= 1) this.$set(this.cache, 'category1', e[0])
            if (e.length >= 1) this.$set(this.cache, 'category1_text', pathLabels[0])
        },
        handleAddCategory() {
            if (Object.keys(this.cache).length <= 0) return this.$message.error('请选择分类')
            if (this.form.categorys) {
                let idx = this.form.categorys.findIndex(el => {
                    return el.category1 === this.cache.category1
                        && el.category2 === this.cache.category2
                        && el.category3 === this.cache.category3
                })
                if (idx >= 0) {
                    return this.$message.error('请勿重复添加')
                }
                this.form.categorys.push(JSON.parse(JSON.stringify(this.cache)))
            } else {
                this.$set(this.form, 'categorys', [
                    JSON.parse(JSON.stringify(this.cache)),
                ])
            }
            this.$set(this, 'cache', {})
        },
        onCloseCategory(idx) {
            this.form.categorys.splice(idx, 1)
        },
    },
}
</script>
